<!-- 表单 》 输入提示框 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="hasLabelSlot" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <el-autocomplete
      ref="input"
      v-model.trim="model"
      v-bind="commonProps"
      :popper-class="`${className}-pop`"
      :maxlength="max"
      :fetch-suggestions="query"
      :trigger-on-focus="focusTip"
      @change="emitChange"
      @select="toSelect"
      @clear="toClear"
    >
      <template #default="{ item }">
        <slot name="item" :item="item" :text="item[nameKey]">
          <div class="CoreWeb-option">
            <div>{{ item[nameKey] }}</div>
            <div v-if="rightKey" class="CoreWeb-option-right">{{ item[rightKey] }}</div>
          </div>
        </slot>
      </template>
    </el-autocomplete>
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixForm from '../mixForm'

const name = 'FormInputTip'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixForm],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      model: '', // 内部绑定值
      EMPTY: '', // 空值常量
    }
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 设置内部绑定值 (可覆盖)
     */
    setModel() {
      const { obj, prop, init, EMPTY, upper, lower } = this
      const value = obj[prop] || init || EMPTY
      this.model = upper ? value.toUpperCase() : lower ? value.toLowerCase() : value
    },

    /**
     * 点击选择
     */
    toSelect(item) {
      const { nameKey, init, EMPTY, upper, lower } = this
      const value = item[nameKey] || init || EMPTY
      this.model = upper ? value.toUpperCase() : lower ? value.toLowerCase() : value
      this.emitChange()
      this.$emit('select', item)
    },

    /**
     * 点击清除
     */
    toClear() {
      if (!this.noClear) this.$refs.input.$children[0].blur()
      this.emitChange()
      this.$emit('clear')
    },
  },
}
</script>
